<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="incloude/common::common_header(~{::meta},~{::link})"></head>
<head>
    <title>菜单列表</title>
</head>

<body>

<div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
                            <ul class="layui-tab-title">

                                <li class="layui-this">
                                    <a th:href="${adminPath} + '/menu/list'">菜单列表</a>
                                </li>
                                <li>
                                    <a th:href="${adminPath} + '/menu/form'">菜单添加</a>
                                </li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">

                                <!--内容-->
                                    <div class="layui-card-body">

                                        <div class="table-reload-btn" style="margin-bottom: 10px;">
                                            <div class="layui-form-item">
                                                <div class="layui-inline">
                                                    <label class="layui-form-label"> 菜单名称：</label>
                                                    <div class="layui-input-inline">
                                                        <input type="text" id="name" class="layui-input laydate-date" placeholder="输入关键字" autocomplete="off">
                                                    </div>
                                                </div>

                                                <div class="layui-inline">
                                                    <button class="layui-btn" data-type="search"><i class="layui-icon layui-icon-search layuiadmin-button-btn"></i></button>
                                                </div>
                                            </div>
                                        </div>

                                        <table class="layui-hide" id="table" lay-filter="table"></table>

                                        <script type="text/html" id="table-operate-bar">
                                            <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                                            <a class="layui-btn  layui-btn-normal layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加下级菜单</a>
                                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
                                        </script>

                                        <script type="text/html" id="table-toolbar">
                                            <div class="layui-btn-container">
                                                <button class="layui-btn layui-btn-sm" lay-event="expandAll">全部展开</button>
                                                <button class="layui-btn layui-btn-sm" lay-event="foldAll">全部折叠</button>
                                            </div>
                                        </script>

                                        <script type="text/html" id="statusTpl">
                                           <input type="checkbox" lay-filter="isShow" value="{{d.id}}" lay-skin="switch" lay-text="显示|禁用" disabled {{ d.isShow==true?'checked':''  }} />
                                        </script>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div th:replace="incloude/common::common_js"></div>
<script type="text/javascript" th:inline="none">
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
        ,treetable:'plugins/treetable'
    }).use(['layer','table','treetable','index'], function(){
        const table = layui.table;
        const layer = layui.layer;
        const treetable = layui.treetable;
        const Menu = { TableId:"table" };

        //初始化表格列
        Menu.InitColumn = function(){
            return [[
                {type: 'numbers', title: '序号'},
                {field: 'name', title: '菜单名称'},
                {field: 'href', title: '链接地址'},
                {field: 'sort', title: '排序'},
                {field: 'isShow', title: '是否显示', width:120, templet: '#statusTpl'},
                {field: 'permission', title: '权限标识'},
                {align:'center', title: '操作', fixed: 'right', width:'20%' , toolbar: '#table-operate-bar'}
            ]];
        };

        // 渲染表格
        var renderTable = function () {
            layer.load(2);
            treetable.render({
                treeColIndex: 1,
                treeSpid: -1,
                treeIdName: 'id',
                treePidName: 'pid',
                treeDefaultClose: false,
                treeLinkage: false,
                elem: Menu.TableId,
                id:'id',
                toolbar: '#table-toolbar',//工具栏
                url: adminPath + '/menu/findList',
                cellMinWidth: 100,
                page: false,
                cols: Menu.InitColumn(),
                done: function () {
                    layer.closeAll('loading');
                }
            });
        };

        renderTable();

        //头工具栏事件
        table.on('toolbar('+ Menu.TableId +')', function(obj){
            switch(obj.event){
                case 'expandAll':
                    treetable.expandAll('#' + Menu.TableId);
                    break;
                case 'foldAll':
                    treetable.foldAll('#' + Menu.TableId);
                    break;
            }
        });

        //监听行工具事件
        table.on('tool('+ Menu.TableId +')', function(obj){
            var data = obj.data;
            switch(obj.event){
                case 'del':
                    layer.confirm('删除菜单可能产生巨大影响，请谨慎操作', function(index){
                        window.location.href= adminPath + '/menu/delete?id='+data.id;
                    });
                    break;
                case 'edit':
                    window.location.href= adminPath + '/menu/form?id='+data.id;
                    break;
                case 'add':
                    window.location.href= adminPath + '/menu/addChildMenu?pid='+data.id;
                    break;
            }

        });


        var $ = layui.$, active = {
            search: function(){
                var keyword = $('#name').val();
                var searchCount = 0;
                $('#table').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
                    $(this).css('background-color', 'transparent');
                    var text = $(this).text();
                    if (keyword !== '' && text.indexOf(keyword) >= 0) {
                        $(this).css('background-color', 'rgba(250,230,160,0.5)');
                        if (searchCount === 0) {
                            treetable.expandAll('#table');
                            $('html,body').stop(true);
                            $('html,body').animate({scrollTop: $(this).offset().top - 150}, 500);
                        }
                        searchCount++;
                    }
                });
                if (keyword === '') {
                    layer.msg("请输入搜索内容", {icon: 5});
                } else if (searchCount === 0) {
                    layer.msg("没有匹配结果", {icon: 5});
                }
            }
        };


        $('.table-reload-btn .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


    });
</script>

</body>

</html>